<template>
  <div class="quotation-list">
    <!-- 添加查询条件 -->
    <view>
      <a-card :bordered="false" class="header-search-card card-wrapper" bodyStyle="padding: 0.3vw 1.2vw 0.2vw;">
        <a-form
          :model="searchParams"
          layout="inline"
          class="search-form"
        >
          <div class="search-container">
            <div class="search-fields">
              <div class="search-item">
                <label class="search-label">模板名称:</label>
                <div class="search-input">
                  <a-input
                    v-model:value="searchParams.tmpName"
                    placeholder=""
                    allow-clear
                    size="small"
                  />
                </div>
              </div>

              <div class="search-item">
                <label class="search-label">模板编码:</label>
                <div class="search-input">
                  <a-input
                    v-model:value="searchParams.tmpCode"
                    placeholder=""
                    allow-clear
                    size="small"
                  />
                </div>
              </div>

              <div class="search-item">
                <label class="search-label">客户编码:</label>
                <div class="search-input">
                  <a-input
                    v-model:value="searchParams.custCode"
                    placeholder=""
                    allow-clear
                    size="small"
                  />
                </div>
              </div>

              <div class="search-item">
                <label class="search-label">状态:</label>
                <div class="search-input">
                  <a-select
                    v-model:value="searchParams.state"
                    placeholder=""
                    :options="stateOptions"
                    allow-clear
                    style="width: 100%"
                    size="small"
                  />
                </div>
              </div>
            </div>

            <div class="search-item search-buttons-inline">
              <a-button type="primary" @click="handleSearch" size="small">
                <template #icon>
                  <SearchOutlined />
                </template>
                查询
              </a-button>
              <a-button type="primary" @click="handleReset" size="small">
                <template #icon>
                  <RedoOutlined />
                </template>
                重置
              </a-button>

              <a-button
                type="primary"
                @click="handleAdd"
                size="small"
              >
                <template #icon>
                  <PlusOutlined />
                </template>
                新增
              </a-button>
              <a-button
                type="primary"
                @click="handleEdit"
                size="small"
              >
                <template #icon>
                  <EditOutlined />
                </template>
                修改
              </a-button>
              <a-button
                type="primary"
                @click="handleDelete"
                size="small"
              >
                <template #icon>
                  <DeleteOutlined />
                </template>
                删除
              </a-button>
            </div>
          </div>
        </a-form>
      </a-card>
    </view>

    <a-card title="" :bordered="false" class="mt-3" :head-style="{ minHeight: '2.08vw' }" :body-style="{ padding: '0.8vw 1.25vw' }">
      <div class="table-container">
        <SortableTable
          :data="paginatedData"
          :columns="columns"
          :row-colors="['white', '#EFF4F9']"
          :row-height="'1.67vw'"
          :font-size="'0.9vw'"
          :show-sort-indicators="true"
          :sorted-indicator-color="'#fff'"
          :unsorted-indicator-color="'rgba(255, 255, 255, 0.5)'"
          @sort-change="handleSortChange"
          :sticky-header="true"
          :get-row-class="getRowClass"
        >
          <template #column-index="{ index }">
            {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
          </template>

          <template #column-selection="{ item }">
            <a-checkbox
              :checked="selectedRows.some(row => row.tmpUuid === item.tmpUuid)"
              @change="(e) => handleRowSelection(e, item)"
              @click.stop
            />
          </template>

          <template #header-selection>
            <a-checkbox
              :checked="isAllSelected"
              :indeterminate="isIndeterminate"
              @change="handleSelectAll"
            />
          </template>

          <template #column-stateSwitch="{ item }">
            <a-switch
              v-model:checked="item.state"
              :checkedValue="0"
              :unCheckedValue="1"
              checked-children="启用"
              un-checked-children="禁用"
              @change="(checked) => handleStatusChange(checked, item)"
            />
          </template>
        </SortableTable>

        <!-- 无数据提示 -->
        <div v-if="paginatedData.length === 0" class="no-data">
          暂无数据
        </div>
      </div>

      <div class="pagination-wrapper">
        <a-pagination
          v-model:current="pagination.current"
          v-model:page-size="pagination.pageSize"
          :total="pagination.total"
          :show-size-changer="true"
          :page-size-options="pagination.pageSizeOptions"
          @change="handlePageChange"
          @show-size-change="handlePageSizeChange"
        />
      </div>
    </a-card>

    <!-- 新增/修改弹窗 -->
    <a-modal
      v-model:open="modalVisible"
      :title="modalTitle"
      @ok="handleModalOk"
      @cancel="handleModalCancel"
      :confirm-loading="modalConfirmLoading"
    >
      <a-form
        :model="modalForm"
        :label-col="{ span: 6 }"
        :wrapper-col="{ span: 16 }"
        ref="modalFormRef"
      >
        <a-form-item
          label="模板名称"
          name="tmpName"
          :rules="[{ required: true, message: '请选择模板名称' }]"
        >
          <a-select
            v-model:value="modalForm.tmpName"
            placeholder="请选择模板名称"
            @change="handleTemplateChange"
          >
            <a-select-option
              v-for="option in stateMaping"
              :key="option.dictValue"
              :value="option.dictValue"
            >
              {{ option.dictLabel }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item
          label="模板编码"
          name="tmpCode"
          :rules="[{ required: true, message: '请输入模板编码' }]"
        >
          <a-input
            v-model:value="modalForm.tmpCode"
            placeholder="请选择模板名称自动填充"
            disabled
          />
        </a-form-item>

        <a-form-item
          label="客户编码"
          name="custCode"
          :rules="[{ required: true, message: '请输入客户编码' }]"
        >
          <a-input
            v-model:value.trim="modalForm.custCode"
            placeholder="请输入客户编码"
            @change="handleCustCodeInput"
          />
        </a-form-item>

        <a-form-item
          label="客户名称"
          name="custName"
          :rules="[{ required: true, message: '请输入客户名称' }]"
        >
          <a-input
            v-model:value="modalForm.custName"
            placeholder="请输入客户编码自动获取客户名称"
            disabled
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, nextTick, onActivated, onMounted, watch } from 'vue';
import dayjs, { Dayjs } from 'dayjs';
import { SortableTable } from '@/components/custom';
import { dieCuttingConfigurationListApi, dieCuttingConfigurationSaveApi, dieCuttingConfigurationEditApi, dieCuttingConfigurationRemoveApi, getCustInfo } from '@/service/api/modules/die-cutting/die-cutting';
import { message, Modal } from 'ant-design-vue';
import { getDicts } from '@/service/api/dict';

import {
  SearchOutlined,
  RedoOutlined,
  PlusOutlined,
  EditOutlined,
  DeleteOutlined
} from '@ant-design/icons-vue';

// 添加防抖函数
function debounce<T extends (...args: any[]) => any>(func: T, wait: number): (...args: Parameters<T>) => void {
  let timeout: ReturnType<typeof setTimeout> | null = null;
  return function (...args: Parameters<T>) {
    if (timeout) {
      clearTimeout(timeout);
    }
    timeout = setTimeout(() => func(...args), wait);
  };
}

const stateMaping: any = ref([]);

const getState = () => {
  getDicts('quote_temp_code').then( res => {
    const dict = res.otherData.data;
    stateMaping.value = dict;
    console.log('接口返回数据:', stateMaping);
  });
};
getState();


interface SearchParams {
  tmpName: string | undefined;
  tmpCode: string | undefined;
  custCode: string | undefined;
  createTime: Dayjs | undefined;
  state: number | undefined;
}

interface TableDataItem {
  id?: string;
  tmpUuid?: string;
  createBy: string;
  createTime: string;
  updateBy: string;
  updateTime: string;
  remark: string;
  tmpName: string;
  tmpCode: string;
  custCode: string;
  custName: string;
  state: number;
  [key: string]: any;
}

interface ModalFormData {
  id?: string;
  tmpUuid?: string;
  tmpName: string | undefined;
  tmpCode: string;
  custCode: string;
  custName: string;
}

interface PaginationConfig {
  current: number;
  pageSize: number;
  total: number;
  showSizeChanger: boolean;
  pageSizeOptions: string[];
}

// 状态选项
const stateOptions = [
  { label: '启用', value: 0 },
  { label: '禁用', value: 1 }
];

// 模板选项 (从字典获取)
// const templateOptions = [
//   // { label: '请选择模板名称', value: '', disabled: true },
//   { label: '通用模板', value: 'T001' },
//   { label: '华星模板', value: 'T002' },
//   { label: '三星模板', value: 'T003' }
// ];

// 查询参数
const searchParams = reactive<SearchParams>({
  tmpName: undefined,     // 模板名称
  tmpCode: undefined,     // 模板编码
  custCode: undefined,    // 客户编码
  createTime: undefined,  // 创建时间
  state: undefined        // 状态
});

// 表格列定义
const columns = [
  {
    key: 'selection',
    label: '',
    width: '3.125vw',
    fixed: true
  },
  {
    key: 'index',
    label: '序号',
    width: '4vw'
  },
  {
    key: 'tmpName',
    label: '模板名称',
    width: '12vw',
  },
  {
    key: 'tmpCode',
    label: '模板编码',
    width: '7vw',
  },
  {
    key: 'custCode',
    label: '客户编码',
    width: '7vw'
  },
  {
    key: 'custName',
    label: '客户名称',
    width: '12vw'
  },
  // {
  //   key: 'state',
  //   label: '状态',
  //   width: '8vw',
  //   formatter: (row: TableDataItem) => {
  //     const stateValue = row.state;
  //     if (stateValue === 0) {
  //       return '启用';
  //     } else if (stateValue === 1) {
  //       return '禁用';
  //     }
  //     return '未知';
  //   }
  // },
  {
    key: 'stateSwitch',
    label: '状态',
    width: '8vw'
  },
  {
    key: 'createBy',
    label: '创建人',
    width: '6vw'
  },
  {
    key: 'createTime',
    label: '创建时间',
    width: '10vw'
  },
  {
    key: 'updateBy',
    label: '修改人',
    width: '6vw'
  },
  {
    key: 'updateTime',
    label: '修改时间',
    width: '10vw'
  },
  {
    key: 'remark',
    label: '备注',
    width: '15vw'
  }
];

// 表格数据
const tableData = ref<TableDataItem[]>([]);

// 分页配置
const pagination = reactive<PaginationConfig>({
  current: 1,
  pageSize: 100,
  total: 0,
  showSizeChanger: true,
  pageSizeOptions: ['10', '20', '50', '100']
});

// 弹窗相关
const modalVisible = ref(false);
const modalTitle = ref('');
const modalConfirmLoading = ref(false);
const modalFormRef = ref();
const isEdit = ref(false);

// 弹窗表单数据
const modalForm = reactive<ModalFormData>({
  tmpName: undefined,
  tmpCode: '',
  custCode: '',
  custName: ''
});

// 选中行相关
const selectedRows = ref<TableDataItem[]>([]);

// 计算是否全选
const isAllSelected = computed(() => {
  return paginatedData.value.length > 0 && selectedRows.value.length === paginatedData.value.length;
});

// 计算是否部分选中
const isIndeterminate = computed(() => {
  return selectedRows.value.length > 0 && selectedRows.value.length < paginatedData.value.length;
});

// 获取数据的函数
const fetchData = () => {
  // 使用动态分页参数
  const params: any = {
    pageNum: pagination.current,
    pageSize: pagination.pageSize,
    ...searchParams
  };

  // 修复日期参数格式问题
  if (params.createTime && typeof params.createTime === 'object' && 'format' in params.createTime) {
    // 如果是 dayjs 对象，转换为标准日期字符串格式
    params.createTime = params.createTime.format('YYYY-MM-DD');
  } else if (!params.createTime) {
    // 如果日期为空，确保传递 undefined 值
    params.createTime = undefined;
  }

  console.log('查询参数:', params);

  dieCuttingConfigurationListApi(params).then(res => {
    console.log('获取数据成功:', res)
    const data = res.otherData
    if (data.code === 200) {
      tableData.value = data.rows;
      pagination.total = data.total;
    } else {
      message.error(data.msg || '获取数据失败');
    }
  }).catch(err => {
    console.error('获取数据失败:', err);
    message.error('获取数据失败: ' + (err.message || '未知错误'));
  });
};

// 分页数据
const paginatedData = computed(() => {
  return tableData.value;
});

// 自定义行类名函数
const getRowClass = (index: number) => {
  return index % 2 === 0 ? 'table-row-even' : 'table-row-odd';
};

// 处理排序变化
const handleSortChange = (sortState: any) => {
  console.log('排序状态:', sortState);
};

// 处理分页变化
const handlePageChange = (page: number, pageSize: number) => {
  pagination.current = page;
  pagination.pageSize = pageSize;
  // 清空选中项
  selectedRows.value = [];
  // 分页变化时重新查询数据
  fetchData();
};

// 处理页面大小变化
const handlePageSizeChange = (current: number, size: number) => {
  pagination.current = current;
  pagination.pageSize = size;
  // 清空选中项
  selectedRows.value = [];
  // 页面大小变化时重新查询数据
  fetchData();
};

// 查询方法
const handleSearch = () => {
  pagination.current = 1;
  // 清空选中项
  selectedRows.value = [];
  fetchData();
};

// 搜索表单重置
const handleReset = () => {
  searchParams.tmpName = undefined;
  searchParams.tmpCode = undefined;
  searchParams.custCode = undefined;
  searchParams.createTime = undefined;
  searchParams.state = undefined;
  // 清空选中项
  selectedRows.value = [];
  // 重置分页并重新查询数据
  pagination.current = 1;
  fetchData();
};

// 新增按钮点击事件
const handleAdd = () => {
  isEdit.value = false;
  modalTitle.value = '新增模板配置';
  resetModalForm();
  nextTick(() => {
    modalVisible.value = true;
  });
};

// 处理行选择
const handleRowSelection = (e: any, record: TableDataItem) => {
  const checked = e.target.checked;
  const index = selectedRows.value.findIndex(item => item.tmpUuid === record.tmpUuid);

  if (checked && index === -1) {
    // 如果选中且未存在于选中项中，则添加
    selectedRows.value.push(record);
  } else if (!checked && index > -1) {
    // 如果取消选中且存在于选中项中，则移除
    selectedRows.value.splice(index, 1);
  }
};

// 全选/取消全选
const handleSelectAll = (e: any) => {
  const checked = e.target.checked;

  if (checked) {
    // 全选：将当前页所有数据加入选中项（过滤掉已选中的）
    const currentPageItems = paginatedData.value;
    const newSelectedRows = [...selectedRows.value];

    currentPageItems.forEach(item => {
      const exists = newSelectedRows.some(selected => selected.tmpUuid === item.tmpUuid);
      if (!exists) {
        newSelectedRows.push(item);
      }
    });

    selectedRows.value = newSelectedRows;
  } else {
    // 取消全选：仅移除当前页的选中项
    const currentPageUuids = paginatedData.value.map(item => item.tmpUuid);
    selectedRows.value = selectedRows.value.filter(
      item => !currentPageUuids.includes(item.tmpUuid)
    );
  }
};

// 修改按钮点击事件
const handleEdit = () => {
  if (selectedRows.value.length === 0) {
    message.warning('请先选择一条数据');
    return;
  }

  if (selectedRows.value.length > 1) {
    message.warning('只能选择一条数据进行编辑');
    return;
  }

  const selectedRow = selectedRows.value[0];
  if (!selectedRow) {
    message.warning('未找到选中的数据');
    return;
  }

  isEdit.value = true;
  modalTitle.value = '修改模板配置';
  resetModalForm();

  // 填充表单数据
  // 根据模板编码查找对应的模板名称作为下拉框的值
  const templateOption = stateMaping.value.find((option: any) => option.dictValue === selectedRow.tmpCode);
  modalForm.tmpName = templateOption ? templateOption.dictValue : undefined;
  modalForm.tmpCode = selectedRow.tmpCode; // 确保带入模板编码
  modalForm.custCode = selectedRow.custCode;
  modalForm.custName = selectedRow.custName;
  modalForm.id = selectedRow.id;
  // 添加tmpUuid参数
  modalForm.tmpUuid = selectedRow.tmpUuid;

  nextTick(() => {
    modalVisible.value = true;
  });
};

// 重置弹窗表单
const resetModalForm = () => {
  modalForm.tmpName = undefined;
  modalForm.tmpCode = '';
  modalForm.custCode = '';
  modalForm.custName = '';
  modalForm.id = undefined;
  modalForm.tmpUuid = undefined;
};

// 删除按钮点击事件
const handleDelete = () => {
  if (selectedRows.value.length === 0) {
    message.warning('请先选择要删除的数据');
    return;
  }

  if (selectedRows.value.length > 1) {
    message.warning('只能选择一条数据进行删除');
    return;
  }

  const selectedRow = selectedRows.value[0];
  if (!selectedRow.tmpUuid) {
    message.warning('未找到有效数据');
    return;
  }

  Modal.confirm({
    title: '确认删除',
    content: `确定要删除选中的数据吗？`,
    okText: '确认',
    cancelText: '取消',
    onOk: () => {
      // 调用删除接口
      dieCuttingConfigurationRemoveApi(selectedRow.tmpUuid)
        .then((res: any) => {
          const data = res.otherData;
          if (data.code === 200) {
            message.success('删除成功');
            // 清空选中项
            selectedRows.value = [];
            // 重新加载数据
            fetchData();
          } else {
            message.error(data.msg || '删除失败');
          }
        })
        .catch((err: any) => {
          message.error('删除失败: ' + (err.message || '未知错误'));
        });
    }
  });
};

// 弹窗确定按钮点击事件
const handleModalOk = () => {
  modalFormRef.value.validate().then(() => {
    // 添加二次确认
    Modal.confirm({
      title: isEdit.value ? '确认修改' : '确认新增',
      content: `确定要${isEdit.value ? '修改' : '新增'}这条数据吗？`,
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        modalConfirmLoading.value = true;

        // 查找选中的模板选项以获取中文名称
        const selectedTemplate = stateMaping.value.find((item: any) => item.dictValue === modalForm.tmpCode);
        const tmpName = selectedTemplate ? selectedTemplate.dictLabel : modalForm.tmpName;

        const formData = {
          tmpCode: modalForm.tmpCode,
          tmpName: tmpName, // 使用中文模板名称
          custCode: modalForm.custCode,
          custName: modalForm.custName,
          id: modalForm.id,
          tmpUuid: modalForm.tmpUuid
        };

        const apiCall = isEdit.value
          ? dieCuttingConfigurationEditApi(formData)
          : dieCuttingConfigurationSaveApi(formData);

        apiCall.then((res: any) => {
          if (res.otherData.code === 200) {
            message.success(`${isEdit.value ? '修改' : '新增'}成功`);
            modalVisible.value = false;
            // 清空选中项
            selectedRows.value = [];
            fetchData(); // 重新加载数据
          } else {
            message.error(res.otherData.msg || `${isEdit.value ? '修改' : '新增'}失败`);
          }
        }).catch((err: any) => {
          message.error(`${isEdit.value ? '修改' : '新增'}失败: ${err.message || '未知错误'}`);
        }).finally(() => {
          modalConfirmLoading.value = false;
        });
      }
    });
  }).catch(() => {
    message.warning('请填写必填项');
  });
};

// 弹窗取消按钮点击事件
const handleModalCancel = () => {
  modalVisible.value = false;
};

// 状态切换处理函数
const handleStatusChange = (checked: boolean | string | number, record: TableDataItem) => {
  // 构造要提交的数据
  const submitData = {
    tmpCode: record.tmpCode,
    tmpName: record.tmpName,
    custCode: record.custCode,
    custName: record.custName,
    state: checked, // 直接使用传入的状态值
    id: record.id,
    tmpUuid: record.tmpUuid
  };

  // 调用编辑接口更新状态
  dieCuttingConfigurationEditApi(submitData)
    .then((res: any) => {
      if (res.otherData.code === 200) {
        message.success('状态更新成功');
        // 更新表格中的数据
        const index = tableData.value.findIndex(item => item.tmpUuid === record.tmpUuid);
        if (index !== -1) {
          tableData.value[index].state = checked as number;
        }
      } else {
        // 如果更新失败，恢复开关状态
        const index = tableData.value.findIndex(item => item.tmpUuid === record.tmpUuid);
        if (index !== -1) {
          tableData.value[index].state = record.state === 0 ? 1 : 0;
        }
        message.error(res.otherData.msg || '状态更新失败');
      }
    })
    .catch((err: any) => {
      // 如果更新失败，恢复开关状态
      const index = tableData.value.findIndex(item => item.tmpUuid === record.tmpUuid);
      if (index !== -1) {
        tableData.value[index].state = record.state === 0 ? 1 : 0;
      }
      message.error('状态更新失败: ' + (err.message || '未知错误'));
    });
};

// 处理模板选择变化
const handleTemplateChange = (value: any) => {
  const selectedTemplate = stateMaping.value.find((item: any) => item.dictValue === value);
  if (selectedTemplate) {
    modalForm.tmpCode = selectedTemplate.dictValue;
    modalForm.tmpName = selectedTemplate.dictLabel; // 保存中文名称
  } else {
    modalForm.tmpCode = '';
    modalForm.tmpName = ''; // 清空模板名称
  }
};

// 处理客户编码输入，防抖获取客户名称
const handleCustCodeInput = debounce((e: any) => {
  const custCode = e.target.value?.trim(); // 去除首尾空格
  if (custCode) {
    getCustInfo({ custCode }).then((res: any) => {
      if (res && res.data) {
        modalForm.custName = res.data.pmaal004 || '';
      } else {
        modalForm.custName = '';
      }
    }).catch((err: any) => {
      console.error('获取客户信息失败:', err);
      modalForm.custName = '';
    });
  } else {
    modalForm.custName = '';
  }
}, 500); // 500ms防抖

// 页面首次加载时调用
onMounted(() => {
  fetchData();
});
</script>

<style scoped>
.quotation-list {
  padding: 0.2vw 0.4vw;
  border-radius: 0.21vw;
  height: calc(100vh - 5.5vw);
  display: flex;
  flex-direction: column;
}

.header-search-card {
  margin-bottom: 0.5vw;
}

.search-container {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 0.5vw;
}

.search-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(12vw, 1fr));
  gap: 0.5vw;
  flex: 1;
}

.search-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-width: 0;
}

.search-label {
  font-size: 0.8vw;
  margin-bottom: 0;
  margin-right: 0.2vw;
  color: #000000;
  white-space: nowrap;
  flex-shrink: 0;
}

.search-input {
  flex: 1;
  min-width: 0;
}

.search-buttons-inline {
  display: flex;
  gap: 0.3vw;
  align-items: end;
  height: 1.8vw;
  margin-left: auto;
}

:deep(.ant-input) {
  font-size: 0.8vw;
  height: 1.8vw;
}

:deep(.ant-select) {
  font-size: 0.8vw;
}

:deep(.ant-select-selector) {
  height: 1.8vw !important;
  align-items: center !important;
}

:deep(.ant-select-selection-item) {
  line-height: 1.6vw !important;
  align-items: center !important;
}

:deep(.ant-btn) {
  font-size: 0.8vw;
  height: 1.8vw;
  padding: 0 0.5vw;
  border-radius: 0.2vw;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
}

/* 修改查询按钮和导出、编辑按钮选中后的背景色为#66CFB6 */
:deep(.ant-btn-primary) {
  background-color: #5F9EA0;
  border-color: #5F9EA0;
  box-shadow: none;
}

.mt-3 {
  margin-top: 0.5vw;
}

:deep(.ant-card-head) {
  min-height: 2.08vw;
}

:deep(.ant-card-body) {
  padding: 0.8vw 1.25vw;
}

.table-container {
  flex: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

:deep(.ant-card) {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:deep(.ant-card-body) {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:deep(.table-container .ant-table-wrapper) {
  flex: 1;
  overflow: hidden;
}

:deep(.table-container .ant-table) {
  height: 100%;
}

:deep(.table-container .ant-table-container) {
  display: flex;
  flex-direction: column;
  height: 100%;
}

:deep(.table-container .ant-table-content) {
  flex: 1;
  overflow: auto;
}

.pagination-wrapper {
  margin-top: 0.52vw;
  display: flex;
  justify-content: flex-end;
}

.no-data {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #999;
  font-size: 0.73vw;
}

/* 响应式处理 */
@media (max-width: 1200px) {
  .search-container {
    flex-direction: column;
    align-items: stretch;
  }

  .search-fields {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    margin-bottom: 0.5vw;
  }

  .search-buttons-inline {
    margin-left: 0;
    justify-content: flex-start;
  }
}

@media (max-width: 768px) {
  .search-fields {
    grid-template-columns: 1fr;
  }
}
/* 解决表头复选框悬停背景色问题 */
:deep(.table-header .table-row:hover .table-cell:first-child) {
  background-color: #6ACBB7 !important;
}
</style>
